@import "../../common/stylus/mixin.styl"
.food
  position fixed
  left: 0
  top: 0
  bottom 48px
  z-index 30
  width 100%
  background #ffffff
  &.fade-enter-active, &.fade-leave-active {
    transition: all 0.2s linear
    transform translate3d(0, 0, 0)
  }
  &.fade-enter, &.fade-leave-active {
    opacity: 0
    transform translate3d(100%, 0, 0)
  }
  .image-header
    position relative
    width 100%
    height 0
    padding-top 100%
    img
      position absolute
      top 0
      width 100%
      height 100%
    .back
      position absolute
      top 10px
      left 0
      .iconfont
        display block
        padding 10px
        font-size 20px
        color #ffffff

  .content
    position: relative;
    padding 18px
    .title
      line-height 14px
      margin-bottom 8px
      font-size 14px
      font-weight 700
      color rgb(7, 17, 27)
    .detail
      margin-bottom 18px
      line-height 10px
      font-size 0
      height 10px
      .sell-count, .rating
        font-size 10px
        display inline-block
        color rgb(147, 153, 159)
      .sell-count
        margin-right 12px
    .price
      font-weight 700px
      line-height 24px
      .now
        margin-right 8px
        font-size 14px
        color rgb(240, 20, 20)
      .old
        font-size 10px
        color rgb(147, 153, 159)
        text-decoration line-through
    .cartControl-wrapper
      position absolute
      right 12px
      bottom 12px
    .buy
      position absolute
      right 18px
      bottom 18px
      z-index 10
      height 24px
      line-height 24px
      padding 0 12px
      box-sizing border-box
      border-radius 12px
      font-size 10px
      color #fff
      background rgb(0, 160, 220)
      &.buy-enter-active, &.buy-leave-active {
        transition: all 0.2s
        opacity: 0
      }
      &.buy-enter, &.buy-leave-active {
        opacity: 0

      }
  .info
    padding 18px
    .title
      line-height 14px
      margin-bottom 6px
      font-size 14px
      color rgb(7, 17, 27)
    .text
      font-size 12px
      line-height 24px
      padding 0 8px
      color rgb(77, 85, 93)
  .rating
    padding-top 18px
    .title
      line-height 14px
      margin-left 18px
      font-size 14px
      color rgb(7, 17, 27)
    .rating-wrapper
      padding 0 18px
      .rating-item
        position relative
        padding 16px 0
        border-1px(rgba(1, 17, 27, 0.1))
        .user
          position absolute
          right 0
          top 16px
          font-size 0
          line-height 12px
          .name
            display inline-block
            vertical-align top
            font-size 10px
            color rgb(147, 153, 159)
            margin-right 6px
          .avatar
            border-radius 50%
        .time
          margin-bottom 6px
          line-height 12px
          font-size 10px
          color rgb(147, 153, 159)
        .text
          line-height 16px
          font-size 12px
          color rgb(7, 17, 27)
          .iconfont
            margin-right 4px
            line-height 16px
            font-size 12px
          .icon-damuzhi
            color rgb(0, 160, 220)
          .icon-down
            color rgb(147, 153, 159)

      .no-rating
        padding 16px 0
        font-size 12px
        color rgb(147, 153, 159)
